<template>
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>会员卡购买</h2>
        <p></p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品类型：
              </div>
              <div class="sales-board-line-right">
                  <v-chooser :selections="buyTypes"></v-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  适用地区：
              </div>
              <div class="sales-board-line-right">
                  <v-selection :selections="districts"></v-selection>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                  买卡即开始计时
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  300 元
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button">
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>更好的提供服务，让顾客玩的更开心。</p>

        <table class="sales-board-table">
          <tbody>
              
          </tbody>
      </table>
      </div>
  </div>
</template>

<script>
import VSelection from '../base/selection'
import VChooser from '../base/chooser'

export default {
  components: {
    VChooser,
    VSelection
  },
  data () {
    return {
      buyTypes: [
        {
          label: '月卡',
          value: 0
        },
        {
          label: '季卡',
          value: 1
        },
        {
          label: '年卡',
          value: 2
        }
      ],
      districts: [
        {
          label: '温州',
          value: 0
        },
        {
          label: '上海',
          value: 1
        },
        {
          label: '广州',
          value: 2
        },
        {
          label: '天津',
          value: 3
        },
        {
          label: '武汉',
          value: 4
        },
        {
          label: '重庆',
          value: 5
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
